<template>
<div class="lemess">
    <div class="lemess-wrap">
        <div class="form-box">
          <img src="/static/img/liuyan.jpg">
          <div class="form">
            <textarea placeholder="既然来了,就说几句" v-model="lemess"></textarea>
            <p>
              <button class="definite" @click="addChat">確定</button>
            </p>
          </div>
          <div class="lemess-list">
            <div class="volume">
              全部留言<span>{{count}}</span>
            </div>
            <div class="cont" v-for="(item,index) in cont">
              <img src="/static/img/header.png">
              <div class="text">
                <p class="tit">
                  <span class="name">王挺</span>
                  <span class="date">2019/06/06</span>
                </p>
                <p class="ct">
                          {{item}}
                </p>
                <a @click="deleteChat(index)">删除评论</a>
              </div>
            </div>
          </div>
        </div>
      <pagination :page="page" :page-size="pageSize" :total="total" :max-page="maxPage" @pagehandler="pageHandler" />
    </div>
</div>
</template>
<script>
  import pagination from "./plugin/pagination"
    export default {
        name: "lemess",
      data(){
          return {
            page: 1,
            pageSize: 10,
            total: 150,
            maxPage:9,
            cont:[],
            lemess:"",
            count:0
          }
      },
      methods:{
        pageHandler: function (page) {
          this.page = page;
        },
        deleteChat(index){
          this.cont.splice(index,1);
          this.count--;
        },
        addChat(){
          this.lemess.trim()?(()=>{this.cont.unshift(this.lemess);this.count++;})():null;
          this.lemess="";
        }
      },
      components:{
          pagination
      }
    }
</script>

<style lang="scss" scoped>
  @import "../assets/css/lemess";
</style>
